<template>
  <div>
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      style="width: 100%"
      @change="handleChange"
      v-if="flag"
    ></el-cascader>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      value: [],
      props: {
        children: "childList",
        label: "name",
        value: "id",
        expandTrigger: "hover",
        emitPath: false,
      },
    };
  },
  watch: {
    defaultValue(v) {
      this.value = v;
    },
  },
  props: ["options", "defaultValue"],
  mounted() {
    this.value = this.defaultValue;
    this.options.forEach((v) => {
      v.childList.forEach((m) => {
        delete m.childList;
      });
    });
    this.flag = true;
  },
  methods: {
    handleChange(value) {
      this.$emit("emit", value);
    },
  },
};
</script>
<style scoped lang="scss">
</style>